<template>
  <div 
    class="station-list-item"
    :class="{ 
      active: isSelected,
      charging: isCharging
    }"
    @click="handleSelect"
    :aria-label="`充电站: ${station.stationName}, ${getStationAccessibilityLabel(station)}`"
    role="button"
    tabindex="0"
    @keydown.enter="handleSelect"
  >
    <div class="station-header">
      <h3 class="station-name">{{ station.stationName }}</h3>
      <span class="distance">{{ formatDistance(station.distance) }}</span>
    </div>
    
    <div class="station-info">
      <p class="address">{{ station.address }}</p>
      <p class="brand">品牌：{{ station.brandName }}</p>
      <p class="hours">营业时间：{{ station.openTime }}</p>
    </div>
    
    <div class="station-status">
      <div class="charger-info">
        <span class="label">快充：</span>
        <span class="count">{{ station.quickAvailableNum }}/{{ station.quickChargeNum }}</span>
      </div>
      <div class="charger-info">
        <span class="label">慢充：</span>
        <span class="count">{{ station.slowAvailableNum }}/{{ station.slowChargeNum }}</span>
      </div>
      <div class="price">¥{{ station.totalCostPrice }}/度</div>
    </div>
    
    <!-- 状态徽章 -->
    <div 
      class="status-badge" 
      :class="getStationStatus(station)"
      :aria-label="`状态: ${getStatusText(getStationStatus(station))}`"
    >
      <span class="status-icon">
        {{ getStatusIcon(getStationStatus(station)) }}
      </span>
      {{ getStatusText(getStationStatus(station)) }}
    </div>

    <!-- 操作按钮组 -->
    <div class="station-actions">
      <button 
        class="route-btn" 
        @click.stop="handleShowRoute"
        :disabled="!currentLocation"
        aria-label="查看路线"
      >
        🗺️ 路线
      </button>
      <button 
        class="charge-btn" 
        @click.stop="handleCharge"
        :disabled="getAvailableCount(station) === 0 || isCharging"
        :aria-label="getChargeButtonLabel(station)"
      >
        {{ getChargeButtonText(station) }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { computed } from 'vue' // 暂时未使用
import type { Station, LocationInfo } from '@/types/station'

interface Props {
  station: Station
  isSelected: boolean
  isCharging?: boolean
  currentLocation?: LocationInfo | null
}

const props = withDefaults(defineProps<Props>(), {
  isCharging: false,
  currentLocation: null
})

const emit = defineEmits<{
  select: [station: Station]
  charge: [station: Station]
  showRoute: [station: Station]
}>()

// 格式化距离显示
const formatDistance = (distance: number): string => {
  if (distance < 1) {
    return `${(distance * 1000).toFixed(0)}米`
  }
  return `${distance.toFixed(1)}公里`
}

// 获取站点状态
const getStationStatus = (station: Station): string => {
  const totalAvailable = station.quickAvailableNum + station.slowAvailableNum
  const totalChargers = station.quickChargeNum + station.slowChargeNum
  
  if (station.stationStatus !== 1) {
    return 'maintenance'
  }
  
  if (totalAvailable === 0) {
    return 'busy'
  }
  
  const availabilityRatio = totalAvailable / totalChargers
  if (availabilityRatio > 0.3) {
    return 'free'
  } else {
    return 'busy'
  }
}

// 获取可用充电桩数量
const getAvailableCount = (station: Station): number => {
  return station.quickAvailableNum + station.slowAvailableNum
}

// 状态显示文本
const getStatusText = (status: string): string => {
  const statusMap = {
    free: '空闲',
    busy: '繁忙', 
    maintenance: '维护中'
  }
  return statusMap[status as keyof typeof statusMap] || '未知'
}

// 状态图标
const getStatusIcon = (status: string): string => {
  const iconMap = {
    free: '✅',
    busy: '🟡',
    maintenance: '🔴'
  }
  return iconMap[status as keyof typeof iconMap] || '❓'
}

// 充电按钮文本
const getChargeButtonText = (station: Station): string => {
  if (props.isCharging) return '充电中...'
  if (getAvailableCount(station) === 0) return '暂无桩位'
  return '开始充电'
}

// 充电按钮 accessibility label
const getChargeButtonLabel = (station: Station): string => {
  if (props.isCharging) return '充电中'
  if (getAvailableCount(station) === 0) return '暂无可用桩位'
  return `在${station.stationName}开始充电`
}

// 站点 accessibility label
const getStationAccessibilityLabel = (station: Station): string => {
  const status = getStationStatus(station)
  const availableCount = getAvailableCount(station)
  return `状态${getStatusText(status)}, 可用桩位${availableCount}个, 价格每度${station.totalCostPrice}元`
}

// 事件处理
const handleSelect = () => {
  emit('select', props.station)
}

const handleCharge = () => {
  emit('charge', props.station)
}

const handleShowRoute = () => {
  emit('showRoute', props.station)
}
</script>

<style scoped>
.station-list-item {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: white;
}

.station-list-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.station-list-item.active {
  border-color: #1890ff;
  background: #f0f8ff;
}

.station-list-item.charging {
  border-color: #52c41a;
  background: #f6ffed;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.station-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.distance {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  margin-left: 8px;
}

.station-info {
  margin-bottom: 12px;
}

.address {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.brand, .hours {
  margin: 2px 0;
  font-size: 13px;
  color: #999;
}

.station-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.charger-info {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.charger-info .label {
  color: #999;
}

.charger-info .count {
  color: #333;
  font-weight: 500;
}

.price {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

/* 状态徽章样式 */
.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.status-badge.free {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.busy {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-badge.maintenance {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.status-icon {
  font-size: 10px;
}

/* 操作按钮组样式 */
.station-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.route-btn, .charge-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.route-btn {
  background: #1890ff;
  color: white;
}

.route-btn:hover:not(:disabled) {
  background: #40a9ff;
  transform: translateY(-1px);
}

.route-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
  transform: none;
}

.charge-btn {
  background: #52c41a;
  color: white;
}

.charge-btn:hover:not(:disabled) {
  background: #73d13d;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(82, 196, 26, 0.3);
}

.charge-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.charge-btn:active {
  transform: translateY(0);
}
</style>